<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>init</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
        src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<link rel="stylesheet"
      href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
    .weather {
        background: url(img/login_bj.jpg) no-repeat;
        width: 250px;
        height: 88px;
        margin: 10px 2px 10px 6px;
        padding: 20px 2px 2px 65px;
    }

    .to_login {
        text-align: right;
        font-weight: bold;
    }

    .panel_1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
    }
</style>
<body>

<div class="panel panel-info">
    <div class="panel-body">
        <div>
            <!--走马灯文字 <marquee direction="left">需要滚动的内容</marquee>-->
            <marquee direction="left">公告 <span id="showtime2"></span></marquee>
        </div>
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
<div class="panel panel-primary ">
    <div class="panel-body">
        welcome! <span id="showtime"></span>
    </div>
    <div class="panel-footer to_login"><a href="${pageContext.request.contextPath}/login">前往登录</a>
    </div>
</div>

<div class="panel_1">
    <div class="panel panel-success">
        <div class="panel-body">
            <iframe frameborder="0" allowtransparency="true"
                    src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12">
            </iframe>
        </div>
        <div class="panel-footer">Panel footer</div>
    </div>

    <div class="panel panel-danger">
        <div class="panel-body">
            <!-- 天气 -->
            <div class="weather">
                <iframe scrolling="no" frameborder="0" allowtransparency="true"
                        src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1">
                </iframe>
            </div>
        </div>
        <div class="panel-footer">Panel footer</div>
    </div>

    <div class="panel panel-warning">
        <div class="panel-body">
            <iframe name="weather_inc"
                    src="http://i.tianqi.com/index.php?c=code&id=7"
                    style="border:solid 1px #7ec8ea"
                    frameborder="0"
                    marginwidth="0" marginheight="0" scrolling="no">
            </iframe>
        </div>
        <div class="panel-footer">Panel footer</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-body">
            <div class="foot_weather" style="margin-top: 30px;margin-left: 200px">
                <iframe scrolling="no" frameborder="0" allowtransparency="true"
                        src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12">
                </iframe>
            </div>
        </div>
        <div class="panel-footer">Panel footer</div>
    </div>
</div>

<div class="panel_1">
    <div class="panel panel-warning">
        <div class="panel-body">
            <h2>剩余时间：<span class="clock">10</span>秒</h2>
        </div>
        <div class="panel-footer">Panel footer</div>
    </div>
</div>

</body>
<script type="text/javascript">
    setInterval(function () {
        showTime();
    }, 1000);

    function showTime() {
        var oDiv = document.getElementById("showtime");
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var data = date.getDate();
        var hours = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var time = year + "-" + fnW((month + 1)) + "-" + fnW(data) + " " + fnW(hours) + ":" + fnW(minute) + ":" + fnW(second);
        var a = new Array("日", "一", "二", "三", "四", "五", "六");
        var week = new Date().getDay();
        var str = "星期" + a[week];
        oDiv.innerHTML = time + "　" + str;
    }

    //补位 当某个字段不是两位数时补0
    function fnW(str) {
        return str > 9 ? str : "0" + str;
    }

    //简陋实现
    setInterval(function () {
        document.getElementById("showtime2").innerHTML = new Date().toLocaleString();
    }, 1000);

    //10秒倒计时
    var t = 10;
    var time = document.getElementsByClassName("clock")[0];

    function fun() {
        t--;
        time.innerHTML = t;
        if(t <= 0) {
            location.href = "http://localhost:8090/SpringMvc/login";
            clearInterval(inter);
        }
    }
    var inter = setInterval("fun()", 1000);
</script>
</html>
